<template>
  <div>
    <el-dialog title="签单操作详情" :visible.sync="FUflg" width="70%" :destroy-on-close='true'>
      <el-alert v-if="csStatus == 7" title="已 签 约" type="warning" :closable='false' show-icon style="margin-bottom:20px;"></el-alert>
      <el-alert v-if="csStatus == 8" title="已 进 件" type="warning" :closable='false' show-icon style="margin-bottom:20px;"></el-alert>
      <el-alert v-if="csStatus == 1" :title="examine.csAudit == 0?'成交/待审核':examine.csAudit == 1?'成交/审核完成':'成交/审核驳回'" type="success" :closable='false'
                show-icon style="margin-bottom:20px;"></el-alert>
      <el-alert v-if="examine.csAudit == 2" :title="examine.auditReason" type="warning" :closable='false' show-icon
                style="margin-bottom:20px;"></el-alert>
      <el-row :gutter="20" v-loading="formDataload">
        <el-col :span="18">
          <el-form ref="form" :model="form" label-width="90px" :disabled="examine.csAudit == 1">
            <el-form-item label="客户姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="客户电话">
              <el-input v-model="form.tel" disabled></el-input>
            </el-form-item>
            <el-form-item label="签约经理">
              <el-input v-model="form.sname" disabled placeholder="系统自动获取，无需填写"></el-input>
            </el-form-item>
            <el-form-item label="申请额度">
              <el-input v-model="form.applyForMoney" placeholder="例如：300000 或 30万" :disabled='type != 7'></el-input>
            </el-form-item>
            <el-form-item label="进件额度">
              <el-input v-model="form.advanceMoney" placeholder="例如：300000 或 30万" :disabled='type != 8'></el-input>
            </el-form-item>
            <el-form-item label="下款额度">
              <el-input v-model="form.belowMoney" placeholder="例如：300000 或 30万" :disabled='type != 1'></el-input>
            </el-form-item>
            <el-form-item label="诚意金">
              <el-input v-model="form.sincerityMoney" placeholder="例如：2000 或 2千"></el-input>
            </el-form-item>
            <el-form-item label="费率">
              <el-input v-model="form.rate" placeholder="例如：3.8">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="创收">
              <el-input v-model="form.revenueGeneration" placeholder="例如：30000 或 3万"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
            <el-form-item label="合同图片">
              <el-upload class="upload-demo" :action="'#'" :before-upload="contractChange">
                <el-button size="small" type="primary" :loading="false">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="诚意金截图">
              <el-upload class="upload-demo" :action="'#'" :before-upload="sincerityChange">
                <el-button size="small" type="primary" :loading="false">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align:center;">
          <el-image style="width:200px;height:200px;margin-bottom:10px;" :src="form.contractImg" :preview-src-list='[form.contractImg]'>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture"></i>
            </div>
          </el-image>
          <p>
            <el-tag size="medium">合 同 照 片</el-tag>
          </p>
        </el-col>
        <el-col :span="6" style="text-align:center;margin-top:15px;">
          <el-image style="width:200px;height:200px;margin-bottom:10px;" :src="form.sincerityMoneyImg" :preview-src-list='[form.sincerityMoneyImg]'>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture"></i>
            </div>
          </el-image>
          <p>
            <el-tag size="medium">诚 意 金 截 图</el-tag>
          </p>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="FUflg = false">取 消</el-button>
        <el-button type="primary" @click="subClick" :loading="formLoad" :disabled="examine.csAudit == 1">提 交</el-button>
      </span>
      <div v-if="cancel.isDelete == 0" id="cancel">
        <p>作 废</p>
        <p class="reason">{{cancel.deleteReason}}</p>
        <p>
          <el-button type="danger" @click="FUflg = false">关闭</el-button>
        </p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { followUpSAAsub, followUpSAAInit } from '../../api/index';
import cosUpFile from '../../utils/cos';
export default {
  data() {
    return {
      formDataload: true,
      type: '',//正在进行 7签约8进件1成交
      csStatus: '',//已提交状态
      cancel: {
        isDelete: '1',//作废状态 0作废1正常
        deleteReason: '',//作废原因
      },
      examine: {
        csAudit: '',//审核状态 0作废1通过2驳回
        auditReason: '',//驳回原因
      },
      FUflg: false,
      active: 0,
      formId: '',
      formLoad: false,
      form: {
        name: '',
        tel: '',
        sname: '',
        applyForMoney: '',
        advanceMoney: '',
        belowMoney: '',
        sincerityMoney: '',
        rate: '',
        revenueGeneration: '',
        remarks: '',
        contractImg: '',
        sincerityMoneyImg: '',
        csId: '',//接口返回携带
      },
    }
  },
  created() {

  },
  methods: {
    //初始化
    getInit(item) {
      this.formDataload = true;
      this.formId = item.id;
      this.type = item.type;
      this.form.tel = item.tel;
      this.form.name = item.name;
      this.FUflg = true;
      followUpSAAInit({
        cusId: item.id
      }).then(res => {
        this.formDataload = false;
        if (res.code == 0) {
          this.csStatus = res.info.csStatus;
          this.cancel.isDelete = res.info.isDelete;
          this.cancel.deleteReason = res.info.deleteReason;
          this.examine.csAudit = res.info.csAudit;
          this.examine.auditReason = res.info.auditReason;
          this.form = {
            name: res.info.cusName ? res.info.cusName : item.name,
            tel: res.info.cusPhone ? res.info.cusPhone : item.tel,
            sname: res.info.userName,
            applyForMoney: res.info.applyAmount,
            advanceMoney: res.info.intoAmount,
            belowMoney: res.info.loanAmount,
            sincerityMoney: res.info.deposit,
            rate: res.info.rate,
            revenueGeneration: res.info.income,
            remarks: res.info.remark,
            contractImg: res.info.contractPic,
            sincerityMoneyImg: res.info.depositPic,
            csId: res.info.csId
          }
        } else {
          this.$message(res.msg);
        }
      })
    },
    //上传合同图片
    contractChange(file) {
      // this.form.contractImg = 'https://img2.baidu.com/it/u=1877570287,3936773156&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1694538000&t=aad4db0d0cca00d474d1180ffd13045b';
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          this.form.contractImg = 'https://' + data.Location;
        }
      })
      return false;
    },
    //上传诚意金照片
    sincerityChange(file) {
      // this.form.sincerityMoneyImg = 'https://img2.baidu.com/it/u=579848155,1310618982&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1694538000&t=110cb8c15aefc9a3d6bb92e461493f8a';
      cosUpFile(file, (err, data) => {
        if (err) {
          this.$message("上传失败");
        } else {
          this.form.sincerityMoneyImg = 'https://' + data.Location;

        }
      })
      return false;
    },
    //提交
    subClick() {
      this.formLoad = true;
      followUpSAAsub({
        csStatus: this.type,
        cusId: this.formId,
        cusName: this.form.name,
        cusPhone: this.form.tel,
        applyAmount: this.form.applyForMoney,
        intoAmount: this.form.advanceMoney,
        loanAmount: this.form.belowMoney,
        deposit: this.form.sincerityMoney,
        rate: this.form.rate,
        income: this.form.revenueGeneration,
        remark: this.form.remarks,
        contractPic: this.form.contractImg,
        depositPic: this.form.sincerityMoneyImg,
        csId: this.form.csId
      }).then(res => {
        this.formLoad = false;
        if (res.code == 0) {
          this.FUflg = false;
          this.$message.success('操作成功');
          this.$parent.getData();
        } else {
          this.$message(res.msg);
        }
      })
    }
  }
}
</script>
<style>
.el-step.is-simple .el-step__title {
    font-size: 14px !important;
}
.image-slot {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #f5f5f5;
    position: relative;
}
.el-icon-picture {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    transform: translate(-50%, -50%);
}
#cancel {
    position: absolute;
    top: 0;
    left: 0;
    color: red;
    font-weight: bold;
    font-size: 200px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 9;
    text-align: center;
    padding-top: 15%;
}
#cancel .reason {
    font-size: 30px;
}
#cancel p:nth-child(3) {
    font-size: 20px;
    padding-top: 20px;
}
</style>
